<template>
	<view class="content">
		<u-navbar background="#F8F8F8;" :is-back="false" title="个人中心"></u-navbar>
		<view class="header">
			<view style="display: flex;" @click="login">
				<u-avatar :src="loginList.avatarUrl"></u-avatar>
				<view class="details">
					<view>{{loginList.nickName? loginList.nickName: '点击登录'}}</view>
					<view class="det-item">简介：{{loginList.intro? loginList.intro: '无'}}</view>
				</view>
			</view>
		</view>
		<view class="topnav">
			<view class="navbar">
				<view @click="this.$u.route('/pages/mine/clock')">
					<u-icon color="#ff3636" name="clock" size="58"></u-icon>
					<view style="font-size: 24rpx;margin: 10rpx;">浏览历史</view>
				</view>
				<view @click="toWell">
					<u-icon color="#ff3636" name="file-text" size="58"></u-icon>
					<view style="font-size: 24rpx;margin: 10rpx;">页面定制</view>
				</view>
				<view @click="this.$u.route('/pages/mine/about')">
					<u-icon color="#ff3636" name="info-circle" size="58"></u-icon>
					<view style="font-size: 24rpx;margin: 10rpx;">关于我们</view>
				</view>
				<view @click="setting">
					<u-icon color="#ff3636" name="setting" size="58"></u-icon>
					<view style="font-size: 24rpx;margin: 10rpx;">个人设置</view>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="hot">我的作品</view>
		</view>
		<view class="main">
			<card-list @delete='dele' :type='true' v-for="(item, index) in config" :key="index" :config="item"></card-list>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" />
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let skip = 0
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				loginList: {},
				config: [],
				status: 'loadmore',
				loadText: {
					loadmore: '没有内容',
					loading: '努力加载中',
					nomore: '没有更多了',
				}
			}
		},
		onShow() {
			this.config = []
			skip = 0
			let login = uni.getStorageSync('login')
			this.loginList = login
			this.status = "loading"
			this.getTempl()
		},
		onReachBottom() {
			if (this.status == "loading") {
				skip += 10
				this.getTempl()
			} else {
				this.status = "nomore"
			}
		},
		methods: {
			login() {
				const login = uni.getStorageSync('login')
				if (login !== '') return this.setting()
				uni.showLoading({
					title: '登录中'
				})
				uni.getUserProfile({
					desc: '用于用户登录',
					success: async (user) => {
						const {
							userInfo
						} = user
						const getUser = await db.collection('user-list').get()
							.catch(errData => {
								this.$u.toast('遇到错误了！')
							})
						if (getUser.data.length) {
							this.loginList = getUser.data[0]
							uni.setStorageSync('login', getUser.data[0])
							this.$u.toast('登陆成功')
							this.getTempl(getUser.data[0].templ)
						} else {
							const data = {
								...userInfo,
								intro: ''
							}
							db.collection('user-list').add({
								data
							}).then(resDate => {
								this.login()
							}).catch(errData => {
								this.$u.toast('遇到错误了！')
							})
						}
					},
					fail: err => {
						this.$u.toast('不登陆的话我们无法储存您的作品哦！')
					}
				})
			},
			toWell(){
				uni.setClipboardData({
					data:'aecode@88.com',
					success:()=> {
						this.$u.toast('请通过剪切板的邮箱联系我们')
					}
				})
			},
			setting(){
				const login = uni.getStorageSync('login')
				if( !login ) return this.$u.toast('请先登录')
				this.$u.route('/pages/mine/setting')
			},
			getTempl() {
				wx.cloud.callFunction({
					name: 'getTemplate',
					data: {
						skip,
						action: 'getUserList',
					},
					success: res => {
						this.config.push(...res.result.data)
						if (res.result.data.length == 0 || res.result.data.length < 10) {
							this.status = 'nomore'
						} else {
							this.status = "loading"
						}
						uni.hideLoading()
					}
				})
			},
			dele(){
				this.config=[]
				this.getTempl()
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.content {
		width: 750rpx;

		.title {
			margin: 20rpx;
			display: flex;
			justify-content: space-between;

			.hot {
				padding: 0 16rpx;
				font-size: 38rpx;
				font-weight: bold;
				border-left: 4px solid #38a6e0;
			}
		}

		.main {
			width: 710rpx;
			margin: 20rpx;
		}

		.topnav {
			border-radius: 16rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			width: 710rpx;
			margin: 20rpx 20rpx 30rpx 20rpx;
			box-shadow: 0 0 10rpx 6rpx #f0f0f0;

			.navbar {
				padding: 30rpx 0;
				display: flex;
				justify-content: space-around;
				align-items: center;
				text-align: center;
			}
		}


		.header {
			width: 710rpx;
			display: flex;
			margin: 20rpx;
			justify-content: space-between;
			align-items: center;

			.details {
				padding: 0 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: 38rpx;
				font-weight: bold;

				.det-item {
					font-size: 28rpx;
					color: #666666;
					font-weight: 400;
					overflow: hidden;
				}
			}
		}
	}
</style>
